<template>
  <el-card
    class="m_t_b_10px xd-LearningHome-PoliticalNews-NewsDetail"
    shadow="hover"
  >
    <div
      slot="header"
      class="clearfix"
    >
      <p class="new-title">
        <b v-text="decode(detail.v_seach_v_notice_title)"></b>
      </p>
      <div class="text_color_999999 text_size_7 desc">
        <span>发布人：{{detail.v_real_name}}</span>
        <span>发布日期：{{detail.dtm_publish_date}}</span>
        <span>应读{{detail.allcount || 0}}人</span>
        <span>已读{{detail.scount || 0}}人</span>
        <span>未读{{detail.wcount || 0}}人</span>
        <el-button
          v-if="detail.i_type === 1"
          class="receive-detail"
          plain
          @click="showReceiveDetail"
        >接收详情</el-button>
      </div>
    </div>
    <pre v-html="decode(detail.v_notice_content)"></pre>
    <div
      v-for="(p,index) in detail.files"
      v-bind:key="index"
      style="line-height: 25px;"
      class="text_size_7"
    >
      <a
        v-show="p.fileName"
        title="点击下载"
        target="_blank"
        @click="registerDownnum(p)"
        :href="baseUrl+'/notice/downtaskAffix?file_id='+p.id"
        style="text-decoration: none;color:#006756;"
      >【{{p.fileName}}】</a>
      <span class="text_color_999999 desc">下载 {{p.downnum}} 次</span>
    </div>
    <!-- <a
      v-show="detail.v_affix_name"
      class="affix"
      target="_blank"
      :href="'web/notice/downtaskAffix/?file_id='+detail.v_affix_id"
    >附件：{{detail.v_affix_name}}</a> -->
    <el-dialog :visible.sync="receiveDetailVisible">
      <div slot="title">
        <div
          class="dialog-back"
          v-show="deptHistory.length > 1"
          @click="dialogBack"
        >&lt;&nbsp;&nbsp;返回</div>
      </div>
      <template>
        <div style=" height: 60vh;overflow-y: auto;overflow-x:hidden;">
          <!-- <el-row :gutter="28">
          <el-col v-for="(item, idx) in receiveListIsDept" :key="'dept' + idx" :span="4">
              <div
                class="grid-content bg-primary dept"
                :class="{'bg-primary-light': item.readCount !== item.userCount}"
                @click="fetchReceiveDetail(item)"
              >
                {{item.dept_name}}
                <div>({{item.readCount}}/{{item.userCount}})</div>
              </div>
          </el-col>
        </el-row>  -->
          <!-- 唉，第三次变 -->
          <h4>未读</h4>
          <el-row :gutter="28">
            <el-col
              v-for="(item, idx) in receiveListIsDeptNotRead"
              :key="'dept' + idx"
              :span="4"
            >
              <div
                class="grid-content bg-primary dept"
                :class="{'bg-primary-light': item.readCount !== item.userCount}"
                @click="fetchReceiveDetail(item)"
              >
                {{item.dept_name}}
                <div>({{item.readCount}}/{{item.userCount}})</div>
              </div>
            </el-col>
            <el-col
              v-for="(item, idx) in receiveListNotDeptNotRead"
              :key="'dept' + idx"
              :span="4"
            >
              <div
                class="grid-content bg-primary"
                :class="{'bg-primary-light': !item.readFlag}"
              >{{item.user_name}}</div>
            </el-col>
          </el-row>
          <h4>已读</h4>
          <el-row :gutter="28">
            <el-col
              v-for="(item, idx) in receiveListIsDeptIsRead"
              :key="'dept' + idx"
              :span="4"
            >
              <div
                class="grid-content bg-primary dept" style="background: #07806d;"
                :class="{'bg-primary-light': item.readCount !== item.userCount}"
                @click="fetchReceiveDetail(item)"
              >
                {{item.dept_name}}
                <div>({{item.readCount}}/{{item.userCount}})</div>
              </div>
            </el-col>
            <el-col
              v-for="(item, idx) in receiveListNotDeptIsRead"
              :key="'dept' + idx"
              :span="4"
            >
              <div
                class="grid-content bg-primary" style="background: #07806d;"
                :class="{'bg-primary-light': !item.readFlag}"
              >{{item.user_name}}</div>
            </el-col>
          </el-row>
        </div>
      </template>
      <!-- 弃用
  <template>
         <el-row :gutter="28" v-if="selectDeptName" style="margin-bottom: 0px;">
          <el-col  :span="4">
          <div class="grid-content bg-primary dept" style="line-height: 30px;"> {{selectDeptName}}
          </div>
          </el-col>
         </el-row>
         <el-row :gutter="28">
          <el-col v-for="(item, idx) in receiveListIsDeptList" :key="'dept' + idx" :span="4">
              <div
                class="grid-content bg-primary dept"
                @click="fetchReceiveDetail(item)"
              >
                {{item.dept_name}}
                <div>({{item.readCount}}/{{item.userCount}})</div>
              </div>
          </el-col>
         </el-row>
        <h4>未读</h4>
        <el-row :gutter="28">
          <el-col v-for="(item, idx) in receiveListNotDeptNotRead" :key="'dept' + idx" :span="4">
              <div
                class="grid-content bg-primary"
                :class="{'bg-primary-light': !item.readFlag}"
              >{{item.user_name}}</div>
          </el-col>
        </el-row>
        <h4>已读</h4>
        <el-row :gutter="28">
          <el-col v-for="(item, idx) in receiveListIsDeptIsRead" :key="'dept' + idx" :span="4">
              <div
                class="grid-content bg-primary dept"
                :class="{'bg-primary-light': item.readCount !== item.userCount}"
                @click="fetchReceiveDetail(item)"
              >
                {{item.dept_name}}
                <div>({{item.readCount}}/{{item.userCount}})</div>
              </div>
          </el-col>
          <el-col v-for="(item, idx) in receiveListNotDeptIsRead" :key="'dept' + idx" :span="4">
              <div
                class="grid-content bg-primary"
                :class="{'bg-primary-light': !item.readFlag}"
              >{{item.user_name}}</div>
          </el-col>
        </el-row>
          </div>
      </template> -->

      <!-- <template v-else>
        <el-row :gutter="28">
          <el-col v-for="(item, idx) in receiveList" :key="'user' + idx" :span="4">
            <div
              class="grid-content bg-primary"
              :class="{'bg-primary-light': !item.readFlag}"
            >{{item.user_name}}</div>
          </el-col>
        </el-row>
      </template>-->
    </el-dialog>
  </el-card>
</template>
<script>
  export default {
    name: 'NoticeDetail',
    data() {
      return {
        baseUrl: utils.baseURL,
        detail: {
          v_notice_title: '',
          v_notice_content: ''
        },
        receiveDetailVisible: false,
        receiveUserList: [],
        receiveDeptList: [],
        receiveNextDeptList: [],
        receiveList: [],
        parentDept: {},
        deptHistory: [],
        showNext: false,
        selectDeptName: '', //选中的部门名称
        receiveParams: {} //初始接收详情参数
      };
    },
    watch: {
      $route: 'refresh'
    },
    computed: {
      receiveListIsDeptList: function() {
        return this.receiveList.filter(function(item) {
          return item.is_dept === 1;
        });
      },
      receiveListIsDeptIsRead: function() {
        return this.receiveList.filter(function(item) {
          return item.is_dept === 1 && item.readCount === item.userCount;
        });
      },
      receiveListIsDeptNotRead: function() {
        return this.receiveList.filter(function(item) {
          return item.is_dept === 1 && item.readCount !== item.userCount;
        });
      },
      receiveListNotDeptNotRead: function() {
        return this.receiveList.filter(function(item) {
          return item.is_dept != 1 && item.readFlag != 1;
        });
      },
      receiveListNotDeptIsRead: function() {
        return this.receiveList.filter(function(item) {
          return item.is_dept != 1 && item.readFlag === 1;
        });
      }
    },
    mounted() {
      var activeMenu = this.$route.query.activeMenu || '/LearningHome/PoliticalNews';
      this.$store.commit('updateActiveMenu', activeMenu);
      var id = this.$route.query.id;
      this.getDetail(id);
      utils.goTop();
    },
    methods: {
      registerDownnum(obj) {
        obj.downnum = parseInt(obj.downnum) + 1;
        this.$forceUpdate();
      },
      getDetail(id) {
        utils.post(utils.api.politicalInfo.newsDetail, { i_id: id }, (res) => {
          if (res.success) {
            this.detail = res.data;
            if (res.data.i_type === 1) {
              this.receiveParams = {};
              if (res.data.v_sendrange === 1) {
                this.receiveParams.deptids = '';
              }
            }
            this.detail.files = [];
            if (this.detail.v_affix_id) {
              var idArray = this.detail.v_affix_id.split('|');
              var nameArray = this.detail.v_affix_name.split('|');
              var downnumArray = this.detail.v_downnum.split('|');
              for (let i = 0; i < idArray.length; i++) {
                var id = idArray[i];
                var name = nameArray[i];
                var downnum = downnumArray[i];
                this.detail.files.push({ id: id, fileName: name, downnum: downnum });
              }
            }
          }
        });
      },
      decode(value) {
        let result = '';
        try {
          result = decodeURI(value);
        } catch (ex) {
          console.warn(ex);
          result = value;
        }
        return result == 'undefined' ? '' : result;
      },
      showReceiveDetail() {
        this.fetchReceiveDetail(this.receiveParams);
      },
      fetchReceiveDetail(params, isBack) {
        let loadingInstance = this.Loading.service({
          fullscreen: true,
          lock: true,
          text: '拼命加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.selectDeptName = params.dept_name;
        const deptids = params.dept_id || '';
        params.i_id = this.detail.i_id;
        utils.post(
          'notice/receiveDetail',
          {
            i_id: params.i_id,
            deptids: deptids
          },
          (res) => {
            loadingInstance.close();
            this.receiveDetailVisible = true;
            if (res.success) {
              this.receiveList = res.data;
              console.log(this.receiveList);
              if (!isBack) {
                this.deptHistory.unshift(params);
              }
            }
          }
        );
      },
      dialogBack() {
        this.deptHistory.shift();
        this.fetchReceiveDetail(this.deptHistory[0], true);
      },
      refresh(item) {
        this.getDetail(item.query.id);
      }
    }
  };
</script>
<style lang="less">
  @primary-color: #cb2c21;
  @bg-light-color: #de1632;

  .xd-LearningHome-PoliticalNews-NewsDetail {
    .new-title{
        font-size: 22px;
    }
    .clearfix {
      text-align: center;
      .desc {
        span {
          margin-right: 25px;
        }
        .receive-detail {
          color: @primary-color;
          border-color: @primary-color;
          padding: 6px 12px;
          span {
            margin-right: 0;
          }
        }
      }
    }
    .dialog-back {
      color: @primary-color;
      cursor: pointer;
    }
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
      color: #ffffff;
      text-align: center;
      margin-bottom: 20px;
    }
    .bg-primary {
      background: @primary-color;
    }
    .bg-primary-light {
      background: @bg-light-color;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 30px;
      line-height: 30px;
      &.dept {
        line-height: 1;
        padding: 10px 0;
        cursor: pointer;
      }
    }
    .row-bg {
      padding: 10px 0;
      background-color: #ffffff;
    }

    .affix {
      display: block;
      text-align: center;
    }

  }
</style>
